/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-15 15:00:29
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-15 15:13:25
 */

import { Component } from 'react'
import {View } from '@tarojs/components'
import LgLeftTarBarItem from '../leftTarBarItem'
// import {AtSwitch, AtForm} from 'taro-ui'

import '../../images/public/style.css'
import './index.scss'


/*
    参数说明
    传入：{
        className,//可选 备注：父容器className便于修改背景颜色，阴影等
        imageUrl,//可选 备注：不传默认使用默认占位图
        selectedImageUrl, //可选 备注：不传默认使用imageUrl，若也无imageUrl默认占位图
        name, //可选 备注：不传默认为“标题X”
        selectedName, //已剔除
        selectedNameColor,//可选 备注：默认颜色rgb(0,144,255)
        defaultSelectedIndex,//可选 备注：默认0
    }
    提供回调事件：{
        handleChange(index)//index为点击当前点击索引index
    }
*/

export default class LgLeftTarBar extends Component {
    constructor() {
        super(...arguments)
        this.triggerState = this.triggerState.bind(this)
    }
    state = {
        lists: []
    }
    triggerState(index) {
        let lists = this.state.lists
        lists = lists.map(o => {
            return {
                ...o,
                isSelected: false
            }
        })
        lists[index].isSelected = true
        this.setState({ lists })
        this.props.handleChange && this.props.handleChange(index)
    }
    initData(props) {
        let lists = props && props.lists || []
        lists = lists.map(o => {
            return {
                ...o,
                isSelected: false
            }
        })
        if (lists.length) {
            let defaultIndex = 0
            if (props.defaultSelectedIndex) {
                let tempIndex = parseInt(props.defaultSelectedIndex)
                if (tempIndex > 0 && tempIndex <= lists.length - 1) {
                    defaultIndex = tempIndex
                }
            }
            lists[defaultIndex].isSelected = true
        }
        this.setState({ lists })
    }
    componentDidMount() {
        this.initData(this.props)
    }
    componentWillReceiveProps(np) {
        this.initData(np)
    }


    render () {
        const lists = this.state.lists || []
        , className = this.props.className ? (' '+this.props.className) :  ""
        return (
            <View className={'left_tarbar_container'+className}>
                {
                    lists.map((o, i)=>{
                        return (
                            <LgLeftTarBarItem key={'tarbar_item'+i} data={o} index={i} triggerState={this.triggerState}></LgLeftTarBarItem>
                        )
                    })
                }
            </View>
        )
    }
}